<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>详情页面</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';  /* project id 2134298 */
            src: url('//at.alicdn.com/t/font_2134298_t99h68yfux.eot');
            src: url('//at.alicdn.com/t/font_2134298_t99h68yfux.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_2134298_t99h68yfux.woff2') format('woff2'),
            url('//at.alicdn.com/t/font_2134298_t99h68yfux.woff') format('woff'),
            url('//at.alicdn.com/t/font_2134298_t99h68yfux.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_2134298_t99h68yfux.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body style="overflow: hidden;width: 100%;overflow-y: auto">
<!--导航栏-->
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl shadow mb-5">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mx-5 pr-5 text-primary" href="/index">Community</a>
    <div class="collapse navbar-collapse row">
        <div class="offset-10 offset-sm-10 offset-md-10 offset-lg-10 offset-xl-10">
            <ul class="navbar-nav">
                <a class="nav-item nav-link mx-4 mt-2" href="/person" th:if="${avatar} == null">个人</a>
                <a class="nav-item nav-link mx-4 " href="/person" th:if="${avatar} != null">
                    <img th:src="${avatar}" style="height: 45px;width: 45px" class="rounded-circle">
                </a>
                <a class="nav-link mr-2 mt-2" href="/publish">发布</a>
            </ul>
        </div>
    </div>
</nav>

<!--    错误提示框-->
<div class="alert alert-warning alert-dismissible fade show" role="alert" th:if="${signal} == 1">
    <strong>出问题啦！</strong> <span th:text="${error}"> 登录</span><a href="/login">点击登录</a>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>


<div class="container row mt-4" th:if="${signal != 1}">
    <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <!--        用户个人信息-->
        <div class="card mb-3 col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <div class="row no-gutters">
                <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                    <img th:src="${user?.avatar}" class="card-img-top">
                </div>
                <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                    <div class="card-body">
                        <h5 class="card-title font-weight-bold" th:text="${user?.nickName}">会时</h5>
                        <p class="card-text"><small class="text-muted" th:text="${user?.introduction}">关注我吧，了解更多</small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--        文章信息：阅读量-->
        <div class="card border-info mb-3" style="max-width: 18rem;">
            <div class="card-header bg-transparent border-info text-center">阅读量</div>
            <div class="card-body text-success">
                <p class="card-text text-center"><i class="iconfont">&#xe609;</i>&nbsp;<span
                        th:text="${browseCount}"></span></p>
            </div>
        </div>
    </div>

    <!--文章内容-->
    <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
        <!--    文章标题-->
        <h3 th:text="${title}"></h3>
        <!--        文章主体-->
        <div class="mt-3" th:id="${question_id}" th:text="${article}"></div>
        <!--        渲染html文本-->
        <script th:inline="javascript" type="text/javascript">
            var quesionID = [[${question_id}]];
            var article = document.getElementById(quesionID).innerText;
            document.getElementById(quesionID).innerHTML = article;
        </script>


        <!--      文章底部导航-->
        <nav class="navbar navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl navbar-light bg-light border mt-3">
            <button type="button" class="btn btn-primary" onclick="likeOrDislike()">
                点赞 <span id="likeNumber" class="badge badge-light"></span>
            </button>
            <div class="collapse navbar-collapse ml-3">
                <div class="navbar-nav">
                    <!--                    modal trigger-->
                    <button type="button"  id="commentNum" class="btn btn-link" data-toggle="collapse" data-target="#commentCollapse"  th:text="${commentNum}">
                        评论
                    </button>
                </div>
            </div>
        </nav>
        <!--         分割线-->
        <hr/>

        <!--        折叠评论区-->
        <div class="collapse mb-3" id="commentCollapse">
            <!--                发布评论-->
            <!--折叠-->
            <p>
                <button class="btn btn-link text-info" type="button" data-toggle="collapse"
                        data-target="#publishCollapse"
                        aria-expanded="false" aria-controls="publishCollapse">
                    发表评论
                </button>
            </p>
            <!--                折叠用户发表评论区-->
            <div class="collapse row" id="publishCollapse">
                <textarea id="commentText" class="col-9 col-sm-9 col-md-9 col-lg-9 col-xl-9 float-left"
                          style="height: 120px"></textarea>
                <button class="col-2 float-right ml-2 btn btn-info" onclick="publishComment()">确认提交</button>
            </div>

            <!--        thymeleaf的局部刷新模块-->
            <div th:fragment="commentFragment" id="commentFragment">
                <!--               评论区内容-->
                <div class="media my-3 shadow-sm my-3" th:each="comment:${comments}">
                    <!--                    用户头像-->
                    <img class="mr-3" th:src="${comment.avatar}" style="height: 60px;width: 60px">
                    <div class="media-body">
                        <!--                        用户Id-->
                        <h5 class="mt-0 mb-1" th:text="${comment.nickName}"></h5>
                        <p th:text="${comment.comment}"></p>
                    </div>
                </div>
                <script th:inline="javascript">
                    var commentInfo = document.getElementById("commentNum");
                    commentInfo.innerText = [[${commentNum}]];
                </script>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <script th:inline="javascript">
        // 点赞数量
        var likeNumber = document.getElementById("likeNumber");
        // 评论区内容,jquery的id选择器需要添加井号
        var $commentText = $("#commentText");

        // 获取thymeleaf的值
        var number = [[${likeNumber}]];
        likeNumber.innerText = number;

        // 发表评论
        function publishComment() {
            $.ajax({
                url: "/comment",
                type: "post",
                data: {"comment": $commentText.val()},
                success(data) {
                    $("#commentFragment").html(data);
                    // 清空输入框
                    $commentText.val("");
                }
            });
        }


        // 点赞
        function likeOrDislike() {
            $.ajax({
                url: "/likeOrDisLike",
                type: "get",
                success(data) {
                    // 点赞数为后端传来的
                    likeNumber.innerText = data;
                }
            });
        }
    </script>


</body>
</html>